<template>
  <div class="container">
    <el-dialog
      title="赠送"
      width="30%"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
      >
        <el-form-item label="靓号">
          <span>{{ detail.product_name }}</span>
        </el-form-item>

        <el-form-item label="靓号持有人" prop="user_code">
          <el-input
            v-model="ruleForm.user_code"
            placeholder="请输入ID"
            style="width: 80%;"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="天数" prop="use_days">
          <el-input
            v-model.number="ruleForm.use_days"
            :disabled="perpetual === -1"
            placeholder="请输入天数"
            style="width: 60%;"
          >
          </el-input>
          <el-radio v-model="perpetual" :label="-1" class="ml-3">永久</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { sendLiang } from "../../../../../../api/personalizedMall/goodNumberPool";

export default {
  name: "giveAwayModal",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      perpetual: null,
      ruleForm: {
        id: null, // 产品主键，必传
        user_code: null, // 用户编号，必传
        use_days: null // 使用天数，必传
      },
      rules: {
        user_code: [
          { required: true, message: "请输入用户编号", trigger: "blur" }
        ],
        use_days: [
          { required: true, message: "请选择使用天数", trigger: "change" },
          { type: "number", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    handleClose(done) {
      this.$emit("update:dialogVisible", false);
      for (const doneKey in this.ruleForm) {
        this.ruleForm[doneKey] = null;
      }
    },
    submitForm(formName) {
      if (this.perpetual === -1) {
        this.ruleForm.use_days = 1000;
      }
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const detail = await sendLiang({ ...this.ruleForm });
          if (detail.code === 200) {
            this.$message.success("赠送成功");
            this.$emit("update:dialogVisible", false);
            for (const doneKey in this.ruleForm) {
              this.ruleForm[doneKey] = null;
            }
          }
        } else {

          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  watch: {
    dialogVisible(newVal) {
      if (newVal) {

        this.ruleForm.id = this.detail.id;
      }
    }
  }
};
</script>

<style scoped></style>
